<template>
  <div class="container">
    <button class="exercise-btn" @click="showExercisePanel">我的错题</button>
  </div>

  <el-dialog
    v-model="visiblePanel"
    title="我的错题本"
    width="800px"
    :close-on-click-modal="false"
    @close="closePanel"
    class="mistakes-dialog"
  >
    <div class="search-container">
      <el-select
        v-model="selectedPrompt"
        filterable
        clearable
        placeholder="请选择或输入prompt"
        class="prompt-select"
      >
        <el-option
          v-for="item in promptOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </div>

    <el-tabs v-model="activeTab" type="card" @tab-change="handleTabChange" class="custom-tabs">
      <el-tab-pane label="选择题" name="choice">
        <div class="question-list">
          <div
            v-for="(question, index) in filteredChoiceQuestions"
            :key="question.id"
            class="mistake-card"
          >
            <div class="mistake-content">
              <div class="question-header">
                <span class="question-index">{{ index + 1 }}.</span>
                <span class="question-text">{{ question.header }}</span>
              </div>
              <div class="question-options">
                <div class="option" :class="{'correct-option': question.rightanswer === 'A'}">
                  <span class="option-letter">A.</span> {{ question.choiceA }}
                </div>
                <div class="option" :class="{'correct-option': question.rightanswer === 'B'}">
                  <span class="option-letter">B.</span> {{ question.choiceB }}
                </div>
                <div class="option" :class="{'correct-option': question.rightanswer === 'C'}">
                  <span class="option-letter">C.</span> {{ question.choiceC }}
                </div>
                <div class="option" :class="{'correct-option': question.rightanswer === 'D'}">
                  <span class="option-letter">D.</span> {{ question.choiceD }}
                </div>
              </div>
              <div class="question-footer">
                <div class="question-actions">
                  <el-button
                    type="danger"
                    size="small"
                    @click="deletechoice(question)"
                    class="delete-btn"
                    plain
                  >
                    <i class="el-icon-delete"></i> 删除错题
                  </el-button>
                </div>
              </div>
            </div>
          </div>
          <div v-if="filteredChoiceQuestions.length === 0" class="empty-state">
            <i class="el-icon-circle-check"></i>
            <p>暂无选择题错题记录</p>
            <p class="empty-tip">继续保持，你做得很好！</p>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="填空题" name="answer">
        <div class="question-list">
          <div
            v-for="(question, index) in filteredAnswerQuestions"
            :key="question.id"
            class="mistake-card"
          >
            <div class="mistake-content">
              <div class="question-header">
                <span class="question-index">{{ index + 1 }}.</span>
                <span class="question-text">{{ question.header }}</span>
              </div>
              <div class="correct-answer-box">
                <div class="answer-label">正确答案：</div>
                <div class="answer-content">{{ question.rightanswer }}</div>
              </div>
              <div class="question-footer">
                <div class="question-actions">
                  <el-button
                    type="danger"
                    size="small"
                    @click="deletanswer(question)"
                    class="delete-btn"
                    plain
                  >
                    <i class="el-icon-delete"></i> 删除错题
                  </el-button>
                </div>
              </div>
            </div>
          </div>
          <div v-if="filteredAnswerQuestions.length === 0" class="empty-state">
            <i class="el-icon-circle-check"></i>
            <p>暂无填空题错题记录</p>
            <p class="empty-tip">继续保持，你做得很好！</p>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script setup>
/* 原有script部分保持不变 */
import { ref, onMounted } from 'vue'
import { choiceQ, answerQ,deleteMyWAnswerQ,deleteMyWChoiceQ } from '@/api/modules/axiosApi'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/userStore'
import {findpromptC} from '@/api/modules/axiosApi'
import {findpromptA} from '@/api/modules/axiosApi'
import { computed } from 'vue'
const visiblePanel = ref(false)
const activeTab = ref('choice')
const choiceQuestions = ref([])
const answerQuestions = ref([])
const userStore =useUserStore()
const status = 1
const selectedPrompt = ref('')
const promptOptions = ref([])

const filteredChoiceQuestions = computed(() => {
  if (!selectedPrompt.value) {
    return choiceQuestions.value
  }
  return choiceQuestions.value.filter(
    q => q.prompt === selectedPrompt.value
  )
})

const filteredAnswerQuestions = computed(() => {
  if (!selectedPrompt.value) {
    return answerQuestions.value
  }
  return answerQuestions.value.filter(
    q => q.prompt === selectedPrompt.value
  )
})

const showExercisePanel = async () => {
  const user_id=userStore.user.id
  visiblePanel.value = true

  try {
    const prompts = await findpromptC(user_id, status)
    promptOptions.value = prompts
    const choiceRes = await choiceQ(user_id, status)
    choiceQuestions.value = choiceRes

    const answerRes = await answerQ(user_id, status)
    answerQuestions.value = answerRes
  } catch (error) {
    console.error('获取错题失败:', error)
    ElMessage.error('获取错题失败，请稍后重试')
  }
}

const closePanel = async() => {
   visiblePanel.value = false
   activeTab.value='choice'
}

const deletechoice = async (question) => {
  try {
    await deleteMyWChoiceQ(question.id);
    ElMessage.success('删除成功');
    const user_id = userStore.user.id;
    const choiceRes = await choiceQ(user_id, status);
    choiceQuestions.value = choiceRes;
  } catch (error) {
    console.error('删除失败:', error);
    ElMessage.error('删除失败，请稍后重试');
  }
}

const deletanswer = async (question) => {
  try {
    await deleteMyWAnswerQ(question.id);
    ElMessage.success('删除成功');
    const user_id = userStore.user.id;
    const answerRes = await answerQ(user_id, status);
    answerQuestions.value = answerRes;
  } catch (error) {
    console.error('删除失败:', error);
    ElMessage.error('删除失败，请稍后重试');
  }
}

const handleTabChange = async (tabName) => {
   const user_id=userStore.user.id
  try {
    if (tabName === 'choice') {
      const prompts = await findpromptC(user_id, status)
      promptOptions.value = prompts
    } else if (tabName === 'answer') {
      const prompts = await findpromptA(user_id, status)
      promptOptions.value = prompts
    }
    selectedPrompt.value = ''
  } catch (error) {
    console.error('获取prompt列表失败:', error)
    ElMessage.error('获取prompt列表失败')
  }
}
</script>

<style scoped>
/* 原有按钮样式保持不变 */
.exercise-btn {
  padding: 5px 8px;
  background: #409EFF;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  white-space: nowrap;
}

.exercise-btn:hover {
  background: #409EFF !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5px;
}

/* 美化后的对话框样式 */
.mistakes-dialog {
  border-radius: 12px;
  overflow: hidden;
}

.mistakes-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #ffdddd;
}

.mistakes-dialog :deep(.el-dialog__title) {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.mistakes-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
  font-size: 18px;
}

.mistakes-dialog :deep(.el-dialog__body) {
  padding: 20px;
  background-color: #fff9f9;
}

/* 搜索栏样式 */
.search-container {
  margin-bottom: 20px;
  padding: 0 10px;
}

.prompt-select {
  width: 100%;
}

/* 标签页样式 */
.custom-tabs :deep(.el-tabs__nav-wrap) {
  padding: 0 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.custom-tabs :deep(.el-tabs__item) {
  font-weight: 500;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  color: #666;
}

.custom-tabs :deep(.el-tabs__item.is-active) {
  color: #ff6b6b;
  font-weight: 600;
}

.custom-tabs :deep(.el-tabs__active-bar) {
  background-color: #ff6b6b;
  height: 3px;
}

/* 错题卡片样式 */
.question-list {
  max-height: 500px;
  overflow-y: auto;
  padding: 10px 5px;
}

.mistake-card {
  margin-bottom: 16px;
  border-radius: 10px;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(255, 107, 107, 0.1);
  transition: all 0.3s;
  border-left: 4px solid #ff6b6b;
}

.mistake-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 107, 107, 0.15);
}

.mistake-content {
  padding: 16px;
}

.question-header {
  display: flex;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}

.question-index {
  color: #ff6b6b;
  font-weight: bold;
  margin-right: 8px;
}

.question-text {
  flex: 1;
}

.question-options {
  margin: 12px 0;
}

.option {
  margin-bottom: 8px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #eee;
  transition: all 0.2s;
}

.option:hover {
  background: #fef0f0;
}

.correct-option {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}

.option-letter {
  font-weight: bold;
  color: #ff6b6b;
  margin-right: 6px;
}

.correct-option .option-letter {
  color: #67c23a;
}

.correct-answer-box {
  margin: 15px 0;
  padding: 12px;
  background-color: #f0f9eb;
  border-radius: 6px;
  border-left: 3px solid #67c23a;
}

.answer-label {
  font-weight: 500;
  color: #67c23a;
  margin-bottom: 5px;
}

.answer-content {
  color: #333;
  line-height: 1.6;
}

.question-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.delete-btn {
  color: #ff6b6b;
  border-color: #ff6b6b;
}

.delete-btn:hover {
  background-color: #ff6b6b;
  color: white;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 40px 0;
  color: #999;
}

.empty-state i {
  font-size: 48px;
  color: #ff6b6b;
  margin-bottom: 16px;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.empty-tip {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

/* 滚动条样式 */
.question-list::-webkit-scrollbar {
  width: 6px;
}

.question-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.question-list::-webkit-scrollbar-thumb {
  background: #ffb6b6;
  border-radius: 3px;
}

.question-list::-webkit-scrollbar-thumb:hover {
  background: #ff8e8e;
}
</style>
